import React, { useState } from 'react';
import { Upload, Button, Modal, message, UploadFile, Divider, Space } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import UploadVideo from './UploadVideo';

interface FileWithButton extends UploadFile {
    button?: React.ReactNode;
}

// 自定义钩子
function usePDFUpload() {
    const [visible, setVisible] = useState(false);
    const [fileList, setFileList] = useState<FileWithButton[]>([]);

    const handleUpload = () => {
        setVisible(true);
    };

    const handleCancel = () => {
        setVisible(false);
    };

    const handleOk = () => {
        setVisible(false);
        message.success('PDF上传成功');
    };

    const beforeUpload = (file: File) => {
        // 只允许上传 PDF 文件
        if (file.type !== 'application/pdf') {
            message.error('只能上传 PDF 文件!');
            return false;
        }
        return true;
    };

    const onChange = (info: { fileList: UploadFile[]; file: UploadFile }) => {
        // 处理文件列表变化
        let newFileList = info.fileList.map((file) => ({
            ...file,
        }));

        if (info.file.status === 'done') {
            newFileList = newFileList.map((file) => ({
                ...file,
            }));
        }

        setFileList(newFileList as FileWithButton[]);
    };

    const handleAdditionalAction = (file: FileWithButton) => {
        message.info(`操作文件: ${file.name}`);
        // 这里可以添加额外的操作逻辑
    };

    return {
        visible,
        handleUpload,
        handleCancel,
        handleOk,
        beforeUpload,
        onChange,
        fileList,
    };
}

const UploadPDF: React.FC = () => {
    const {
        visible,
        handleUpload,
        handleCancel,
        handleOk,
        beforeUpload,
        onChange,
        fileList,
    } = usePDFUpload();

    return (
        <div>
            <Button type="primary" onClick={handleUpload}>
                <UploadOutlined /> 查看/上传
            </Button>
            <Modal title="上传PDF" visible={visible} onOk={handleOk} onCancel={handleCancel}>
                <Upload
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    listType="text"
                    beforeUpload={beforeUpload}
                    onChange={onChange}
                    onRemove={() => { }} // 需要一个空的 onRemove 函数来使 fileList 可编辑
                    accept=".pdf" // 限制只能上传 PDF 文件
                >
                    <Button icon={<UploadOutlined />}>上传/查看</Button>
                </Upload>
                <div>
                    {fileList.map((file, index) => (
                        <div key={index}>
                            <Divider />
                            <Space >
                                {file.name} <UploadVideo />
                            </Space>

                        </div>
                    ))}
                </div>
            </Modal>
        </div>
    );
};

export default UploadPDF;